const zit1 = document.querySelector('.zit1');
const zit2 = document.querySelector('.zit2');
const zhsz1 = document.querySelector('.zh-sz1 ');
const zhsz2 = document.querySelector('.zh-sz2');
const zhszb1 = document.querySelector('.zh-sz1 b');
const zhszb2 = document.querySelector('.zh-sz2 b');
const zuls1 = document.querySelector('.z-uls1');
const zuls2 = document.querySelector('.z-uls2');
const i2 = document.querySelector('.i2');
const i1 = document.querySelector('.i1');
const lis1 = document.querySelectorAll('.z-uls1 li');
const lis2 = document.querySelectorAll('.z-uls2 li');
zit1.onmouseenter = function(){
    zuls1.style.display = 'block';
        this.style.color  = '#fff';
        this.style.background = 'rgb(32, 82, 158)';
        i1.style.color = '#fff';
}
zit1.onmouseleave = function(){
    zuls1.style.display = 'none';
    this.style.color  = '#000';
    this.style.background = '#fff';
    i1.style.color = '#666';}
zit2.onmouseenter = function(){
        zuls2.style.display = 'block';
        this.style.color  = '#fff';
        this.style.background = 'rgb(32, 82, 158)';
        i2.style.color = '#fff';
    }
zit2.onmouseleave = function(){
        zuls2.style.display = 'none';
        this.style.color  = '#000';
        this.style.background = '#fff';
        i1.style.color = '#666';}    
for(let i = 0 ;i<lis1.length;i++){
    lis1[i].onclick = function(){
        console.log(1)
        zhszb1.innerHTML = lis1[i].innerHTML;
        zuls1.style.display = 'none';
        zit1.style.color  = '#000';
        zit1.style.background = '#fff';
        i1.style.color = '#666';
    }
}
for(let j = 0 ;j<lis2.length;j++){
    lis2[j].onclick = function(){
        zhszb2.innerHTML = lis2[j].innerHTML;
        zuls2.style.display = 'none';
        zit2.style.color  = '#000';
        zit2.style.background = '#fff';
        i2.style.color = '#666';
    }
}